<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body onload="loadEmpData()">
<table class="table">
    <thead class="thead-dark">
    <tr>
        <th scope="col">序号</th>
        <th scope="col">姓名</th>
        <th scope="col">职位</th>
        <th scope="col">上司</th>
        <th scope="col">入职时间</th>
        <th scope="col">工资</th>
        <th scope="col">奖金</th>
        <th scope="col">部门</th>
        <th scope="col">操作</th>
    </tr>
    </thead>
    <tbody id="tbody">

    </tbody>

</table>
</body>
</html>
<script>
    function loadEmpData() {

        let ajax = new XMLHttpRequest();
        ajax.onreadystatechange = function () {
            if (ajax.status === 200 && ajax.readyState === 4) {
                let json = ajax.responseText;
                // 将字符串转换成json
                json = JSON.parse(json);
                let tbody = document.getElementById('tbody');
                for (let i = 0; i < json.length; i++) {
                    let trObj = document.createElement('tr');
                    let td1Obj = document.createElement('td');
                    let td2Obj = document.createElement('td');
                    let td3Obj = document.createElement('td');
                    let td4Obj = document.createElement('td');
                    let td5Obj = document.createElement('td');
                    let td6Obj = document.createElement('td');
                    let td7Obj = document.createElement('td');
                    let td8Obj = document.createElement('td');
                    let td9Obj = document.createElement('td');
                    let e = json[i];
                    td1Obj.innerHTML = i + 1;
                    td2Obj.innerHTML = e.enname;
                    td3Obj.innerHTML = e.job;
                    td4Obj.innerHTML = e.mgr;
                    td5Obj.innerHTML = e.hireDate;
                    td6Obj.innerHTML = e.sal;
                    td7Obj.innerHTML = e.comm;
                    td8Obj.innerHTML = e.deptno;
                    td9Obj.innerHTML = '删除';
                    trObj.appendChild(td1Obj);
                    trObj.appendChild(td2Obj);
                    trObj.appendChild(td3Obj);
                    trObj.appendChild(td4Obj);
                    trObj.appendChild(td5Obj);
                    trObj.appendChild(td6Obj);
                    trObj.appendChild(td7Obj);
                    trObj.appendChild(td8Obj);
                    trObj.appendChild(td9Obj);
                    tbody.appendChild(trObj);
                }
            }
        }
        ajax.open('get', '../emp_find_ajax');
        ajax.send();
    }
</script>